@charset "utf-8";
/**
 * Created by kroyo on 2018/07/07
 * probation    产品试用
 */


@import 'common/mixincommon';
@import 'common/reset';


input，textarea{
    -webkit-appearance: none;
    outline: none;
}


body{
    width: 100%;
    background-color: $sf;
}

.yelow{
    color: $yelow;
}


.probation-banner{
    width: 100%;
    max-width: 750px;
    height: r(260px);
    background-color: $borcolor;
    a{
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
    }
    img{
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
    }
    .swiper-pagination{
        bottom: r(6px) !important;
    }
    .swiper-pagination-bullet{
        width: r(16px);
        height: r(16px);
        border: 1px solid $sf;
        background-color: transparent;
    }
    .swiper-pagination-bullet-active{
        border-color: rgba(255,255,255,.4);
        background-color: rgba(255,255,255,.4);
    }
}



.probation-title{
    height: r(80px);
    line-height: r(80px);
    color: $s3;
    font-size: r(32px);
    font-weight: normal;
    text-align: center;
}


.probation-flow{
    padding-bottom: r(30px);
    border-bottom: r(20px) solid $f2;
    .flow-list{
        font-size: 0;
        text-align: center;
        margin-top: r(6px);
    }
    .flow-list-li{
        display: inline-block;
        margin: 0 r(25px);
        &:last-of-type .li-text:after{
            display: none;
        }
    }
    .li-num{
        display: inline-block;
        width: r(34px);
        height: r(34px);
        line-height: r(34px);
        color: $sf;
        font-size: r(24px);
        text-align: center;
        border-radius: 50%;
        margin-bottom: r(4px);
        background-color: #888888;
    }
    .li-text{
        position: relative;
        display: block;
        color: $s6;
        font-size: r(22px);
        &:after{
            position: absolute;
            top: r(6px);
            right: r(-30px);
            display: block;
            content: '';
            width: r(11px);
            height: r(19px);
            background: url(../img/probation/flow-right.png) no-repeat center;
            background-size: 100% 100%;
        }
    }
}




.product-list{
    max-width: 750px;
    padding-bottom: r(50px);
    margin: r(-30px) auto 0;
}
.product-list-li{
    width: 100%;
    padding: r(30px);
    border-bottom: r(1px) solid $f2;
    &:last-of-type{
//      border-bottom: none;
    }
    .product-img{
        position: relative;
        width: 100%;
        height: r(300px);
        background-color: $borcolor;
        text-align: center;
        a{
            display: block;
            width: 100%;
            height: 100%;
        }
        img{
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }
        .product-state{
            position: absolute;
            top: r(20px);
            right: r(-10px);
            display: block;
            width: r(138px);
            height: r(44px);
            line-height: r(44px);
            color: $sf;
            font-size: r(28px);
            text-align: center;
            padding-right: r(20px); 
            &:before{
                position: absolute;
                top: 0;
                left: r(-26px);
                display: block;
                content: '';
                border-top: r(23px) solid transparent;
                border-bottom: r(22px) solid transparent;
                border-right: r(26px) solid $acolor;
            }
        }
        .yellow{
            background-color: $yelow;
            &:before{
                border-right-color: $yelow;
            }
        }
        .blue{
            background-color: $acolor;
            &:before{
                border-right-color: $acolor;
            }
        }
        .gray{
            background-color: #c1c1c1;
            &:before{
                border-right-color: #c1c1c1;
            }
        }
    }
    .product-text{
        margin-top: r(20px);
        padding: 0 r(20px);
    }
    .product-text-left{
        float: left;
    }
    .product-title{
        color: $s3;
        font-size: r(32px);
        line-height: r(32px);
        a{
            color: $s3;
        }
    }
    .product-price{
        color: $s9;
        font-size: r(24px);
        .blue{
            color: $acolor;
            font-size: r(36px);
        }
    }
    .product-text-right{
        float: right;
        text-align: right;
    }
    .product-time{
        height: r(32px);
        color: $s9;
        font-size: r(24px);
        line-height: r(32px);
        .gary{
            color: $s3;
        }
    }
    .product-number{
        color: $s9;
        font-size: r(24px);
    }
}




.container{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.product-detail{
    width: 100%;
    border-bottom: r(20px) solid $f2;
    .container{
        padding: r(20px) r(30px);
    }
    img{
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
    }
    p{
        color: $s3;
        font-size: r(24px);
    }
}


.probation-more{
    padding-bottom: r(160px);
}




.product-toolbar{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: $sf;
    box-shadow: 0 r(2px) r(12px) 0 rgba(0,0,0,.2);
    z-index: 9;
    .container{
        position: relative;
        padding: r(20px) r(30px);
    }
}
.product-toolbar-backbtn{
    position: absolute;
    bottom: r(170px);
    right: r(30px);
    width: r(100px);
    height: r(100px);
    line-height: r(100px);
    color: $sf;
    font-size: r(28px);
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(0,0,0,.6);
    a{
        display: block;
        color: $sf;
    }
}
.product-toolbar-btnwrapper{
    .apply-btn{
        display: block;
        width: 100%;
        height: r(90px);
        line-height: r(90px);
        color: #fefefe;
        font-size: r(32px);
        text-align: center;
        background-color: $acolor;
        border-radius: r(10px);
    }
    .apply-infor{
        
    }
    .infor-timer{
        float: left;
        color: $s6;
        font-size: r(24px);
    }
    .infor-pnum{
        float: right;
        color: $s6;
        font-size: r(24px);
    }
}



.site-window{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 r(66px);
    background-color: rgba(0,0,0,.4);
    z-index: 99;
    .container{
        position: relative;
        height: 100%;
    }
    .win-content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 100%;
        height: r(400px);
        border-radius: r(10px);
        padding: r(30px);
        background-color: $sf;
    }
    .btn{
        display: block;
        width: r(440px);
        height: r(90px);
        line-height: r(90px);
        color: $sf;
        font-size: r(32px);
        margin: r(30px) auto 0;
        border-radius: r(10px);
        background-color: $acolor;
        text-align: center;
    }
}





.win-apply{
    .apply-state{
        display: block;
        width: 100%;
        height: r(220px);
        color: $s3;
        font-size: r(28px);
        padding: r(10px);
        border: r(2px) solid $borcolor;
        @include fontfamily();
        @include inputplace($s9);
    }
}


.win-applysuccess,.win-nologin{
    text-align: center;
    h3{
        color: $s6;
        font-size: r(36px);
        font-weight: normal;
        margin: r(30px) auto r(20px);
    }
    p{
        color: $s9;
        font-size: r(24px);
        margin-bottom: r(60px);
    }
}

.win-nologin{
    h3{
        color: $s3;
    }
    p{
        padding: 0 r(48px);
        text-align: left;
    }
    .btn{
        display: inline-block;
        width: r(200px);
        height: r(70px);
        line-height: r(70px);
        font-size: r(28px);
        margin: 0 r(14px);
    }
    .registerbtn{
        background-color: $yelow;
    }
}
